<script setup>
import {Star, SuccessFilled, View} from "@element-plus/icons-vue";
import {Search,} from '@element-plus/icons-vue'
</script>

<template>
  <div>
    关键字搜索：<el-input v-model="input" style="width: 240px" placeholder="美食名称搜索" />
    <el-input v-model="input" style="width: 240px" placeholder="美食分类搜索" />
    <el-input v-model="input" style="width: 240px" placeholder="美食标签搜索" />
    <el-button :icon="Search" circle />
  </div>
  <div>
    <h1>美食分类</h1>
    <el-button type="primary" plain>全部</el-button>
    <el-button type="primary" plain>食类分类1</el-button>
    <el-button type="primary" plain>食类分类2</el-button>
    <el-button type="primary" plain>食类分类3</el-button>
    <el-button type="primary" plain>食类分类4</el-button>
    <el-button type="primary" plain>食类分类5</el-button>
    <el-button type="primary" plain>食类分类6</el-button>
    <el-button type="primary" plain>食类分类7</el-button>
    <el-button type="primary" plain>食类分类8</el-button>
    <el-button type="primary" plain>测试分类</el-button>
  </div>
  <div>
    <h1>美食排序</h1>
    <el-button type="primary" plain>创建时间从高到低</el-button>
    <el-button type="primary" plain>创建时间从低到高</el-button>
    <el-button type="primary" plain>更新时间从高到低</el-button>
    <el-button type="primary" plain>更新时间从低到高</el-button>
    <el-button type="primary" plain>美食名称正序</el-button>
    <el-button type="primary" plain>美食名称倒序</el-button>
    <el-button type="primary" plain>美食分类正序</el-button>
    <el-button type="primary" plain>美食分类倒序</el-button>
    <el-button type="primary" plain>美食标签正序</el-button>
    <div style="height: 10px"></div>
    <el-button type="primary" plain>美食标签倒序</el-button>
  </div>
  <div style="height: 20px"></div>

  <div style="display: flex;justify-content: center;">
    <el-card style="max-width: 240px">
      <img
          src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
          style="width: 100%"
      />
      美食名称：美食名称1<br>
      美食标签：美食标签1<br>
      创建时间：2024-7-6

    </el-card>

    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://img1.baidu.com/it/u=3382106738,3155049567&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          style="width: 100%"
      />
      美食名称：美食名称2<br>
      美食标签：美食标签2<br>
      创建时间：2024-7-6
    </el-card>
    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://img0.baidu.com/it/u=2884754623,1958584677&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
          style="width: 100%"
      />
      美食名称：美食名称3<br>
      美食标签：美食标签3<br>
      创建时间：2024-7-9
    </el-card>
    <div style="width: 20px"></div>
    <el-card style="max-width: 240px">
      <img
          src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201704%2F21%2F20170421225317_uFJea.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1723109910&t=8818b6edf3c4c5240f6b0ae6a38a3c25"
          style="width: 100%"
      />
      美食名称：美食名称4<br>
      美食标签：美食标签4<br>
      创建时间：2024-7-9
    </el-card>
  </div>
</template>